<template>
    <div>
        <el-row>
            <el-col style="font-size:30px" :span="3.5">
                {{ entity.name }}
            </el-col>
            <el-col :span="2">
                [<el-link type="primary" @click="toEntryEdit">编辑</el-link>]
            </el-col>
        </el-row>
        <el-divider />
        <div v-html="output"> </div>
        <el-divider />

        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span style="font-weight:bolder">程序预览</span>
                    <el-button @click="toCodeEdit">
                        我也想写
                    </el-button>
                </div>
            </template>
            <el-row v-for="(item,index) in programs" :key="index" class="text item" justify="space-around">
                <el-col :span="3">
                    {{ item.userId }}
                </el-col>
                <el-col :span="5">
                    <el-popover
                        :width="200"
                        trigger="click"
                        :content="item.description">
                        <template #reference>
                            <el-button>查看描述</el-button>
                        </template>
                    </el-popover>
                </el-col>
                <el-col :span="4">
                    <el-button @click="run(index)">运行</el-button>
                </el-col>
                <el-col :span="2">
                    <el-button type="warning" circle @click="votelike(item)">
                        <el-icon><Star /></el-icon>
                        {{ item.voteLike }}
                    </el-button>
                </el-col>
                <el-col :span="2">
                    <el-button type="danger" circle @click="votedislike(item)">
                        <el-icon><Pouring /></el-icon>
                        {{ item.voteDislike }}
                    </el-button>
                </el-col>
            </el-row>
        </el-card>
    </div>

</template>

<script>
    import { marked } from "./marked";
export default{
    methods:{
        run(index){
          console.log("item: ",this.programs)
            sessionStorage.setItem("program",JSON.stringify(this.programs[index]))
            this.$router.push('/programview')
        },
        votelike(item){
          console.log(this.user)
            this.axios.post('/program/like', {
                "userId": this.user.id,
                "programId": item.id
            }).then(res=>{
                if (res.code === '0'){
                    item.voteLike += 1
                  this.$message({
                    type: "success",
                    message:'投票成功'
                  })
                }
                else{
                    this.$message({
                        type:'error',
                        message:res.msg
                    })
                }
            })
        },
        votedislike(item){
            this.axios.post('/program/dislike', {
                "userId": this.user.id,
                "programId": item.id
            }).then(res=>{
                if (res.code === '0'){
                    item.voteDislike += 1
                  this.$message({
                    type: "success",
                    message:'投票成功'
                  })
                }
                else{
                  this.$message({
                    type:'error',
                    message:res.msg
                  })
                }
            })
        },
        toEntryEdit(){
            if (this.user){
                this.$router.push({
                  path:"/EntryEdit",
                    query: { url: this.res.data.entity.path, content: this.content, searchContent: this.searchContent }
                })
            }
            else{
                this.$router.push('/login')
            }
        },
        toCodeEdit(){
            if (this.user){

              // sessionStorage.setItem("user", JSON.stringify(res.data))  // 缓存用户信息
                sessionStorage.setItem("entity", JSON.stringify(this.entity))
                this.$router.push('/codeedit')
            }
            else{
                this.$router.push('/login')
            }
        }
    },
  computed: {
    output() {
      return marked(this.content);
    }
  },
    data() {
        return {
            user: '',
            searchContent: '冒泡排序',
            entity: {},
            programs: [],
            entity_content: '',
          content:'',
          output:'',
          res:{}
        };
    },
    created() {
        let str = sessionStorage.getItem("user")
        this.user = JSON.parse(str)
        if (this.$route.query.content){
            this.searchContent = this.$route.query.content
        }
        this.axios.post('/entity/search_eq', {"search_content":this.searchContent, "tt":1}).then(res=>{
          // console.log(this.searchContent)
          console.log(res)
            this.entity = res.data.entity
          this.content=res.data.content
          this.output=marked(this.content)
          console.log(this.content)
          console.log(this.output)
            this.programs = res.data.programs
          console.log(this.programs)
          this.res=res
        })
        },

}
</script>

<style>
p{
    font-size:14px
}

ol{
    font-size:14px
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 480px;
}
</style>